<template>
  <div>
    <!--
    # v-model的原理
      原理：v-model本质上是一个语法糖，例如应用在输入框上就是value属性和input事件的结合
      作用：提供数据的双向绑定
      数据变视图跟着变：value，视图变数据跟着变@input
    -->
    <input type="text" v-model="userName">
    <input type="text" :value="userPassword" @input="inputHandler">
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      userName: "",
      userPassword: "",
    }
  },
  methods: {
    inputHandler(event) {
      this.userPassword = event.target.value
    }
  }

}
</script>
<style lang="less"></style>
